<template>
	<view class="container-goods-details">
		<view class='goodsDetails-head'>
			<u-swiper :list="goodsDetails.images" keynName="image" height="375px" circular />
			<image src='https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/transparent-back.png' mode="widthFix" @click="$goPath(1)"></image>
			<view class="icon" @click="getCanvans" v-show="text">
				<u-icon name="share-square" size="32"></u-icon>
			</view>
		</view>

		<section class='goodsDetails-sect'>
			<view class='goods-info'>
				<view class='goods-info-price' v-if="goodsDetails.limitation == 1">
					<view class='limit-price now-price'>￥<span>{{ goodsDetails.limitationPrice }}</span> 元</view>
					<view class='limit-price original-price'>￥<span>{{ goodsDetails.showPrice }}</span></view>
				</view>

				<view class='goods-info-price' v-else>
					<view class='now-price'>￥<span>{{ goodsDetails.showPrice }}</span>元</view>
				</view>

				<view class='goods-info-limitationSell' v-if="goodsDetails.limitation == 1">
					{{ goodsDetails.limitationSell == 0 ? `限购${goodsDetails.limitationCount}件` :
						`限购${goodsDetails.limitationCount}件，第${goodsDetails.limitationCount + 1}件恢复原价` }}
				</view>
				<view class='goods-info-title'>
					{{ goodsDetails.name }}
				</view>
			</view>
			<u-divider text="详情介绍"></u-divider>
			<view class='goods-details-imgs' v-for="(item, index) in goodsDetails.details" :key='index'>
				<image class="" :src="item" mode="widthFix" />
			</view>
		</section>
		<view class='goodsDetails-foot'>
			<view @click="addShopCar">
				加入购物车
			</view>
		</view>
		<u-popup :show="showImg" @close="showImg = false" mode="center">
			<view class="popup">
				<canvas canvas-id="myCanvas" id='box'></canvas>
				<view class="icon" @click="uploadImg">
					<u-icon name="download" color="#000" size="32"></u-icon>
				</view>
				<image :src="base64" mode="" v-if="base64" class='immm'></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { getUserInfo } from '@/common/auth';
export default {
	data() {
		return {
			userInfo: {},
			goodsDetails: {},
			productId: '',
			cartList: [],
			showImg: false,
			text: getUserInfo()?.userId,
			base64: null,
			image: 'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/shareCode.png'
		};
	},
	onLoad(options) {
		this.productId = options.productId;
		this.userInfo = getUserInfo()
	},

	onShow() {
		this.getGoodsDetails();
		if (!getUserInfo()) return
		this.getCartList();
	},
	// 小程序分享
	// onShareAppMessage() {
		
	// },
	methods: {
		// 合成图片
		getCanvans() {
			this.showImg = true
			this.$nextTick(() => {
				this.copyFn()
			})
		},
		copyFn() {
			let ww, hh;
			let info = uni.getSystemInfoSync()
			console.log(info,'info') 
			const query = uni.createSelectorQuery().in(this);
			query.select('#box').boundingClientRect(data => {  //获取canvas-dom
				console.log(data,'data')
				ww = data.width; //准确的宽高
				hh = data.height
				var ctx = uni.createCanvasContext('myCanvas') //绑定画布
				ctx.drawImage(this.image, 0, 0, ww, hh); //填充进图片
				ctx.drawImage(this.goodsDetails.thumbnail, 20,110, ww-20, hh-280); //填充进图片
				ctx.setFillStyle('#32B499')  //设置内容2的文字样式
				ctx.setFontSize(20);
				// ctx.setTextAlign('center')  //同上
				// ctx.fillText(this.text, ww-165, hh-101 )
				ctx.fillText(this.text, ww/2.6, hh/1.23)
				ctx.draw();  //输出到画布中
				uni.showLoading({
					title: '加载中...'
				});
				setTimeout(() => {  //不加延迟的话，base64有时候会赋予undefined
					uni.canvasToTempFilePath({
						canvasId: 'myCanvas',
						success: (res) => {
							this.base64 = res.tempFilePath
							console.log(res, 'this.base64')

						}
					})
					uni.hideLoading();
				}, 1200)
			}).exec();
		},
		uploadImg() {
			uni.saveImageToPhotosAlbum({
				filePath: this.base64,
				success: function () {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: "图片已下载至图库，请打开图库查看",
					});
				}
			});
		},
		//获取商品详情
		async getGoodsDetails() {
			let result = await this.$request.productDetail({
				productId: this.productId,
			})
			result.data.images = result.data.images.split(',');
			result.data.details = result.data.details.split(',');
			this.goodsDetails = result.data;
		},


		//获取购物车列表
		async getCartList() {
			let result = await this.$request.shoppingList({ userId: this.userInfo.userId })
			this.cartList = result.data;
		},

		//商品加入购物车
		addShopCar() {
			let userInfo = getUserInfo()
			const {
				cartList,
				goodsDetails
			} = this;

			if (!userInfo) return this.$toast('您还未登录，先去登录吧')

			let isAdd = false;
			let result = cartList.some((item) => {
				if (item.productId == goodsDetails.id) {
					return true;
				}
			});

			if (goodsDetails.limitation == 1) {
				if (goodsDetails.purchasedCount <= goodsDetails.limitationCount) {
					if (result) {
						cartList.map(item => {
							if (goodsDetails.limitationSell) {
								isAdd = true;

								if (item.productId === goodsDetails.id && (item.count + goodsDetails.purchasedCount) >=
									goodsDetails.limitationCount) {
									uni.showToast({
										title: '用户购买超过限购数量，超过部分根据原价销售',
										icon: 'none'
									});
								}
							} else {
								if (item.productId === goodsDetails.id && (item.count + goodsDetails.purchasedCount) >=
									goodsDetails.limitationCount) {
									uni.showToast({
										title: '用户购买超过限购数量，不可购买',
										icon: 'none'
									});
									isAdd = false;
									return;
								} else if (item.productId === goodsDetails.id && (item.count + goodsDetails.purchasedCount) <
									goodsDetails.limitationCount) {
									isAdd = true;
								}
							}
						});
					} else {
						isAdd = true;
					}
				} else {
					if (goodsDetails.limitationSell) {
						uni.showToast({
							title: '用户购买超过限购数量，超过部分根据原价销售',
							icon: 'none'
						});
						isAdd = true;
					} else {
						uni.showToast({
							title: '用户购买超过限购数量，不可购买',
							icon: 'none'
						});
					}
				}

			} else {
				isAdd = true;
			}

			if (isAdd) {
				const param = {
					userId: userInfo.userId,
					productIdList: [this.productId]
				};
				this.$request.shoppingAdd(param).then(res => {
					if (res.code == 200 && res.isSuccess) {
						uni.showToast({
							title: '已加入购物车',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			}
		}
	},

};
</script>

<style lang="scss" scoped>
.container-goods-details::-webkit-scrollbar {
	width: 0;
}

.container-goods-details {
	width: 100%;
	height: 100vh;
	font-size: 28rpx;
	font-family: 'PingFang SC-Medium';
	display: flex;
	flex-direction: column;
	color: #333333;
	overflow: auto;
	padding-bottom: 80rpx;
	box-sizing: border-box;
	overflow-y: auto;

	.goodsDetails-head {
		width: 100%;
		height: 750rpx;
		position: relative;

		image {
			width: 70rpx;
			height: 70rpx;
			display: block;
			position: fixed;
			top: 80rpx;
			left: 40rpx;
			z-index: 100000;
		}

		.icon {
			position: fixed;
			top: 85rpx;
			right: 40rpx;
			z-index: 100000;
		}
	}

	.goodsDetails-swiper {
		height: 100%;

		.swiper-item {
			width: 100%;
			height: 750rpx;

			image {
				width: 100%;
				height: 750rpx;
				display: block;
			}
		}
	}

	.goodsDetails-sect {
		width: 100%;
		flex: 1;
		padding-bottom: calc(1.8rem + env(safe-area-inset-bottom));
		box-sizing: border-box;
		position: relative;
		background-color: #fff;

		.goods-info {
			padding: 0 24rpx;
			padding-top: 24rpx;
			box-sizing: border-box;

			.goods-info-price {
				display: flex;
				align-items: flex-end;
				color: #EA5F5F;

				.limit-price {
					color: #32B499;
				}

				.now-price {
					display: flex;
					align-items: flex-end;

					span {
						font-size: 44rpx;
						font-family: 'DIN-Bold';
						margin-right: 4rpx;
					}
				}

				.original-price {
					font-size: 24rpx;

					span {
						text-decoration: line-through;
						font-family: 'DIN-Bold';
						font-size: 28rpx;
					}
				}

			}

			.goods-info-limitationSell {
				width: fit-content;
				margin: 24rpx 0;
				padding: 4rpx 20rpx;
				background: #FDF3F3;
				color: #EA5F5F;
				font-family: 'PingFang SC-Medium';
				border-radius: 8rpx;
				box-sizing: border-box;
			}

			.goods-info-title {
				font-family: 'PingFang SC-Bold';
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/* 设置超过为省略号的行数 */
				overflow: hidden;
			}

			.goods-details-title {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 24rpx 0;

				image {
					width: 4.3rem;
					height: 0.375rem;
					display: block;
				}

				view {
					font-size: 28rpx;
					font-family: 'PingFang SC-Bold';
					margin: 0 20rpx;
				}

			}
		}
		.goods-details-imgs image {
			width: 100%;
			display: block;
		}
	}

	.goodsDetails-foot {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 24rpx 0;
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;

		view {
			width: 90% !important;
			line-height: 80rpx;
			border-radius: 1.25rem;
			font-size: 28rpx;
			font-family: 'PingFang SC-Medium';
			border: 0;
			background-color: #32B499;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.popup {
		width: 620rpx;
		height: 1104rpx;

		#box {
			position: absolute;
			width: 620rpx;
			height: 1104rpx;
			top: -99999899rpx;
			left: -99999899rpx;
			z-index: 9999;
		}

		.immm {
			width: 620rpx;
			height: 1104rpx;
		}

		.icon {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			top: 20rpx;
			right: 28rpx;
			z-index: 100000;

		}
	}
}
</style>